<template>
    <div class="whole">
        <div class="title">系统管理</div>
        <el-form label-width="100px" class="demo-ruleForm" >
            <el-form :model="form"  ref="ruleForm" :rules="rules">
                <el-form-item  prop="account">
                    <el-input 
                      prefix-icon="el-icon-user-solid" 
                      placeholder="请输入账号" 
                      v-model="form.account" class="inp">
                    </el-input>
                </el-form-item>
                <el-form-item  prop="password" style="marginTop:50px">
                  <el-input 
                      :type="showpwd ? 'text' : 'password'"
                      placeholder="请输入密码" 
                      v-model="form.password" 
                      >
                  <i slot="prefix" class="el-input__icon el-icon-search"></i>
                  <i slot="suffix" class="iconfont"
                  :class="{'icon-biyanjing ' : showpwd, 'icon-yanjing' : !showpwd}" @click="dian"></i>
                    
                    </el-input>
                </el-form-item>
        </el-form>
            <el-button type="primary" @click="logindian">登录</el-button>
        </el-form>
    </div>
</template>

<script>
import axios from "@/utils/request";
import { addRouteByRole } from '@/router'
export default {
  data() {
    const validateAccount = (rule, value, callback) => {
      if (value.length === 2) {
        callback();
      } else {
        callback(new Error("账号长度必须在2位数以上"));
      }
    };
    const validatePass = (rule, value, callback) => {
      let regular = /^[0-9A-Za-z]+$/;
      if (!regular.test(value)) {
        callback(new Error("有字母"));
      }
      var reg = /[A-Za-z].*[0-9]|[0-9].*[A-Za-z]/;
      if (reg.test(value)) {
        callback();
      } else {
        callback(new Error("有数字和字母"));
      }
    };

    return {
      showpwd: false,
      form: {
        account: "",
        password: ""
      },
      rules: {
        account: [
          { required: true, message: "请输入账号", trigger: "change" },
          {
            min: 2,
            max: 12,
            message: "长度在 2 到 12 个字符",
            trigger: "change"
          }
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "change" },
          {
            min: 2,
            max: 12,
            message: "长度在 2 到 12 个字符",
            trigger: "change"
          }
        ]
      }
    };
  },

  methods: {
    dian() {
      this.showpwd = !this.showpwd;
    },
    logindian() {
      this.$refs.ruleForm.validate(async res => {
        if (res) {
          const res = await axios.post("/users/checkLogin", this.form);
          if (res.data.code == 0) {
            // 将token保存到本地
            localStorage.setItem("token", res.data.token);
            // this.$router.addRoute({
            //   path: "/test",
            //   component: () => import("../test/Test.vue")
            // });
            localStorage.setItem("role", res.data.role);
            // 动态添加了路由
            addRouteByRole();
            console.log(this.$router.getRoutes());
            this.$router.push("/home");
          } else {
            this.$message.error(res.data.msg);
          }
        }
      });
    }
  }
};
</script>

<style lang="less" scoped>
.whole {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  background-color: #304156;
  .title {
    color: #fff;
    font-size: 16px;
    width: 400px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    font-weight: 600;
  }
  .dis {
    display: flex;
    flex-direction: column;
  }
}
.inp {
  margin-top: 30px;
  width: 400px;
  height: 10px;
  background-color: rgba(0, 0, 0, 0.2);
  color: #fff;
}
.el-button {
  margin-top: 45px;
  padding: 9px 15px;
  width: 400px;
  height: 32px;
}
div/deep/.el-input__inner {
  background: #242e3c;
  color: #fff;
}
</style>